<template>
  <div class="page dashboard">
    <div class="dashboard-header">
      <h1>统计首页</h1>
      <p class="dashboard-subtitle">欢迎使用宿舍管理系统，这里是您的数据概览</p>
    </div>
    
    <div class="stats-grid">
      <div class="stat-card buildings">
        <div class="stat-icon">🏢</div>
        <div class="stat-content">
          <div class="stat-value">12</div>
          <div class="stat-label">总楼栋</div>
        </div>
      </div>
      
      <div class="stat-card rooms">
        <div class="stat-icon">🏠</div>
        <div class="stat-content">
          <div class="stat-value">348</div>
          <div class="stat-label">总房间</div>
        </div>
      </div>
      
      <div class="stat-card students">
        <div class="stat-icon">👥</div>
        <div class="stat-content">
          <div class="stat-value">1,024</div>
          <div class="stat-label">入住学生</div>
        </div>
      </div>
      
      <div class="stat-card repairs">
        <div class="stat-icon">🔧</div>
        <div class="stat-content">
          <div class="stat-value">7</div>
          <div class="stat-label">待维修工单</div>
        </div>
      </div>
    </div>
    
    <div class="charts-grid">
      <div class="chart-card">
        <div class="chart-header">
          <h3>宿舍入住率</h3>
        </div>
        <div class="chart-content">
          <div class="chart-placeholder">
            <div class="chart-icon">📊</div>
            <p>入住率趋势图</p>
            <div class="chart-stats">
              <div class="chart-stat">
                <span class="stat-number">94.2%</span>
                <span class="stat-desc">当前入住率</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="chart-card">
        <div class="chart-header">
          <h3>卫生评分分布</h3>
        </div>
        <div class="chart-content">
          <div class="chart-placeholder">
            <div class="chart-icon">⭐</div>
            <p>卫生评分分布图</p>
            <div class="chart-stats">
              <div class="chart-stat">
                <span class="stat-number">4.6</span>
                <span class="stat-desc">平均评分</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
  </div>
</template>

<script setup>
import { useAuthStore } from '../stores/auth'

const authStore = useAuthStore()
</script>

<style scoped>
.dashboard {
  padding: 0;
  max-width: 1400px;
  margin: 0 auto;
}

.dashboard-header {
  margin-bottom: 2rem;
}

.dashboard-header h1 {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dashboard-subtitle {
  color: var(--text-secondary);
  font-size: 1rem;
  margin: 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.stat-card {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow);
  border: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: all 0.2s ease-in-out;
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--primary-light));
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.stat-card.buildings::before {
  background: linear-gradient(90deg, #3b82f6, #60a5fa);
}

.stat-card.rooms::before {
  background: linear-gradient(90deg, #10b981, #34d399);
}

.stat-card.students::before {
  background: linear-gradient(90deg, #8b5cf6, #a78bfa);
}

.stat-card.repairs::before {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.stat-icon {
  font-size: 2.5rem;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: 0.25rem;
}

.stat-label {
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.stat-change {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  display: inline-block;
}

.stat-change.positive {
  background: #dcfce7;
  color: #166534;
}

.stat-change.negative {
  background: #fee2e2;
  color: #991b1b;
}

.charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.chart-card {
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  border: 1px solid var(--border-light);
  overflow: hidden;
}

.chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 1.5rem 1rem;
  border-bottom: 1px solid var(--border-light);
}

.chart-header h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.chart-actions {
  display: flex;
  gap: 0.5rem;
}

.chart-content {
  padding: 1.5rem;
  height: 300px;
}

.chart-placeholder {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-muted);
  background: var(--bg-secondary);
  border-radius: var(--radius);
  border: 2px dashed var(--border);
}

.chart-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.chart-placeholder p {
  font-size: 1rem;
  margin-bottom: 1rem;
}

.chart-stats {
  display: flex;
  gap: 2rem;
}

.chart-stat {
  text-align: center;
}

.stat-number {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.25rem;
}

.stat-desc {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.recent-activities {
  margin-top: 2rem;
}

.activity-card {
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  border: 1px solid var(--border-light);
  overflow: hidden;
}

.activity-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 1.5rem 1rem;
  border-bottom: 1px solid var(--border-light);
}

.activity-header h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.activity-list {
  padding: 1rem 1.5rem 1.5rem;
}

.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border-light);
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-icon {
  width: 40px;
  height: 40px;
  background: var(--bg-secondary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.activity-content {
  flex: 1;
}

.activity-title {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.activity-desc {
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
}

.activity-time {
  color: var(--text-muted);
  font-size: 0.75rem;
}

</style>
